<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <i class="fa fa-tachometer" aria-hidden="true"></i> 亚马逊订单 # <?=$order->order_name?>
        <small><?=$order->createdDtm?></small>
      </h1>
    </section>
    
    <section class="content">
    	
    	<table class="table table-striped table-hover table-bordered table-condensed" id="table-view">
    		<thead>
    			
    		</thead>
    		<tbody>
    			<?php foreach ($details as $item => $row):?>
    			<tr>
    				<?php foreach ($row as $item => $cell):?>
    				<td>
    					<?=$cell?>
    				</td>
    				<?php endforeach; ?>
    			</tr>
    			<?php endforeach; ?>
    		</tbody>
    	</table>
    	<script type="text/javascript">
    		$(function(){
    			var TBHelper = function(table) {
    				this.table = table;
    			}
    			TBHelper.prototype._mergeRow = function(row, start, length, style){
    				let tr = this.table.find('tr').eq(row - 1);
    				let td = tr.find('td').eq(start - 1);
    				td.attr('colspan', length);
    				// delete other td
    				tr.find('td').each(function(index, _td){
    					if(index > start - 1 && index < length + start - 1) {
    						_td.remove();
    					}
    				})
    				if(style) {
    					this.style(row, start, style)
    				}
    			}
    			TBHelper.prototype.getRowColInt = function(mergeCells) {
    				let cells = mergeCells.split(':'), startCell = cells[0], endCell = cells[1];

    				return {
    					startCell: this.getCellInt(startCell),
    					endCell: this.getCellInt(endCell),
    				}

    			}

    			TBHelper.prototype.getCellInt = function(cell) {
    				let reg = /([A-Z]*)([0-9]*)/;
    				let res = cell.match(reg);
    				let row = res[2].charCodeAt() - '1'.charCodeAt() + 1, col = res[1].charCodeAt() - 'A'.charCodeAt() + 1;
    				return {
    					rowInt: row,
    					colInt: col
    				}

    			}

    			TBHelper.prototype.merge = function(mergeCells, style){
    				let cells = this.getRowColInt(mergeCells);
    				
    				let start = cells.startCell.colInt;
    				let length = cells.endCell.colInt - cells.startCell.colInt + 1;
    				let row = cells.startCell.rowInt;
    				this._mergeRow(row, start, length, style);
    			}

    			TBHelper.prototype.style = function(row, start, style) {
    				let tr = this.table.find('tr').eq(row - 1);
    				tr.find('td').eq(start - 1).css(style);
    			}

    			TBHelper.prototype.hasNotes = function(){
    				return this.table.find('tr').length > 3
    			}


    			var TB = new TBHelper($('#table-view'));
    			let mergeCells  = <?=$mergeCells?>;
    			mergeCells.map(function(cellString){
    				TB.merge(cellString, {
	    				textAlign: 'center',
	    				fontWeight: 'bold',
	    				fontSize: '16px'
	    			});	
    			})
    			
    			if(TB.hasNotes()) {
    	// 			TB._merge(-1, 2, 17);
					// TB._merge(-2, 2, 17);	
    			}
    			
    		})
    	</script>
		
    </section>
</div>